<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>🐶</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
 
  <!-- <img class="hotdog" src="./img/hotdog.jpg" />
  <img class="guanjun" src="./img/guanjun.jpg" /> -->

  <img class="wsc" src="./img/wsc.jpg" alt="王思聪">
  <div class="show-score"></div>
      
  <div class="play-panel">
    <div class="start"><span class="btn">❥开始游戏</span></div>
    <div class="stop">
      <div class="title">游戏结束</div>
      <div class="score">60分</div>
      <div class="btn">※重新开始※</div>
    </div>
  </div>
  
  <div class="game-score">
    <h1>剩余时间<span>60</span>秒</h1>
    <h1></h1>
  </div>
</body>
</html>
<script>
    var random = function(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }
     // ### 全局变量
    var wscObj =  document.querySelector('.wsc')
    var score = 0
    var wscX = 0
    var wscY = (window.innerHeight||document.documentElement.clientHeight) - wscObj.offsetHeight

    // # 随机食物 x轴
    // 1 打开页面，执行定时器代码 1s
    // 2 定时器处理函数中 
    //   2.1 随机数0-9  
    //   2.2 判断2.1随机数68创建冠军食物，01234579热狗食物
    //   2.3 追加食物到页面
    setInterval(function(){
        var imgObj = document.createElement('img')
        var who = random(0,9)
        if(who ==6 && 8){
            imgObj.className = 'food guanjun'
            imgObj.src = './img/guanjun.jpg'
            imgObj.setAttribute('type','guanjun')
        } else {
            imgObj.className = 'food hotdog'
            imgObj.src = './img/hotdog.jpg'
            imgObj.setAttribute('type','hotdog')
        }
        var min = 0
        var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
        imgObj.style.left = random(min,max) + 'px'
        imgObj.style.top = '0px'
        document.body.appendChild(imgObj)
    },1000)
    // # 食物掉落 y轴
    // 1 打开页面，执行定时器代码 50ms
    // 2 定时器处理函数中 
    //   2.1 获取所有食物
    //   2.2 遍历
    //   2.3 计算top数据：原top+ 2
    //   2.4 判断位置  超出-网页移除，没超出-重置top
    setInterval(function(){
        var foods = document.querySelectorAll('.food')
        foods.forEach(function(item){
            var top = parseInt(item.style.top) + 2
            var maxTop = (window.innerHeight || document.documentElement.clientHeight) - item.offsetHeight
            if(top>=maxTop){
                document.body.removeChild(item)
            } else {
                item.style.top = top + 'px'
            }
            // 3. 食物掉落判断是否在王公子范围内
            //    公式x：  食物x > 王公子x  && 食物x < 王公子x+自身宽度
            //    公式y：  食物y+自身高度 > 王公子y 
            //    符 合：【公式x、公式y】则分数+1
            var foodX = parseInt(item.style.left) 
            var foodY = parseInt(item.style.top) + item.offsetHeight
            if((foodX>wscX && foodX<=(wscX+wscObj.offsetWidth)) && foodY>wscY){
                let type = item.getAttribute('type')
                type == 'guanjun' ? score+=5 : score++
                console.log(`食物坐标【${foodX},${foodY}】，王公子坐标【${wscX+wscObj.offsetWidth},${wscY+wscObj.offsetHeight}】，+1，总分【${score}}】`);
                document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
                document.body.removeChild(item)
                // 提示 <div class="show-score">+1</div>
                var divObj = document.createElement('div')
                divObj.className = 'show-score'
                divObj.innerText = type == 'guanjun' ? '+5' : '+1' 
                divObj.style.left = wscX + wscObj.offsetWidth +'px'
                document.body.appendChild(divObj)
                setTimeout(function(){
                    document.body.removeChild(divObj)
                },1000)
            }
        })
    },5)
    // # 安排王公子
    // 1 打开网页，绑定鼠标移动事件
    // 2 事件处理函数中
    //   2.1 获取事件对象
    //   2.2 限定left最大网页宽度-王公子宽度
    //   2.3 同步left为鼠标位置
    document.onmousemove = function(evt){
        var e = evt || window.event
        var left = e.clientX - wscObj.offsetWidth/2
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
        if(left<0) left = 0
        if(left>=maxLeft) left = maxLeft
        wscObj.style.left = left + 'px'
        wscX = left
    }
</script>